
// 编辑组件页面

import React, { useState} from "react";
import { Button, Form, Input, Modal, Radio ,message} from "antd";

import url from "../../../config/url";
import req from "../../../http/req";
const CollectionCreateForm = ({ visible, onCreate, onCancel, data }) => {
  const [datas, setData] = useState({ ...data });

  
  var username ,mobile ,gender , email 
    // useEffect(() => {
if(data.data){
    var {username ,mobile ,gender , email }={
        username: data.data.username,
        mobile: data.data.mobile,
        gender: data.data.gender,
        email: data.data.email,
       }
      //  console.log(username);
    
}else{
    // data.data={}
}
    // },[data]);

  // const myForm = React.createRef()//就是上面图片ref的容器
  // const showUpdate = (text) => {
  //         setData({
  //             modelCurrentValue: data,
  //         },() => {
  //         	//categoryName是输入框name的属性值，后面则是输入框的值
  //             myForm.current.setFieldsValue({categoryName: this.state.modelCurrentValue})
  //         })

  //     }

  const [form] = Form.useForm();
  return (data.data &&(
    <Modal
      visible={visible}
      title="编辑!"
      okText="Create"
      // style={{color:'#fff'}}
      cancelText="Cancel"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            form.resetFields();
            onCreate(values);
          })
          .catch((info) => {
            // console.log("Validate Failed:", info);
          });
      }}
    >
      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        // value={{
        //   //   modifier: "data",
        //   username: data.username,
        //   mobile: data.mobile,
        //   email: data.email,
        //   gender: data.gender,
        // }}
       initialValues={{
          //   modifier: "data",
          username,
          mobile,
          email,
          gender,
        }}
      >
        {/* <Form.Item
          name="id"
          label="id:"
          rules={[
            {
              required: true,
              message: "Please input the title of collection!",
            },
          ]}
        >
          <Input />
        </Form.Item> */}

        <Form.Item
          name="username"
          label="用户名:"
          rules={[
            {
              required: true,
              message: "Please input the title of collection!",
            },
          ]}
        >
          <Input />
        </Form.Item>

        {/* <Form.Item
          name="password"
          label="密码"
          rules={[
            {
              required: true,
              message: "Please input the title of collection!",
            },
          ]}
        >
          <Input />
        </Form.Item> */}
        <Form.Item name="mobile" label="手机号:">
          <Input />
        </Form.Item>
        <Form.Item name="email" label="邮箱:">
          <Input type="email" />
        </Form.Item>
        <Form.Item
          name="gender"
          className="collection-create-form_last-form-item"
        >
          <Radio.Group name="gender">
            <Radio value="1">男</Radio>
            <Radio value="2">女</Radio>
            <Radio value="3">保密</Radio>
          </Radio.Group>
        </Form.Item>
      </Form>
    </Modal>
  ))
};

const Redact = (props) => {
  const [visible, setVisible] = useState(false);
  const [data, setData] = useState({});
  //   console.log(props);
  const onCreate = (values) => {
    var id= data.data.id-0
    var obj ={
        username:values.username,
        mobile:values.mobile-0,
        email:values.email,
        gender:values.gender-0,
       
     }
    req.put(url.Deletedel+'/'+id, obj).then((res) => {    
          if(res.data.errNo===0){
            window.location.reload();
        }else{
          message.error('导入失败',3, )
        }
    });

    // console.log("Received values of form: ", values);

    setVisible(false);
  };
  const xiugai = () => {
    setVisible(true);
    // console.log(props.record.id);
    var id = props.record.id;
    req.get(url.Deletedel +'/' +id).then((res) => {
      setTimeout(() => {
        setData({
          data: res.data.userInfo,
        });
      });
    });
  };
  return (
    <div>
      <Button
        type="primary"
        onClick={() => {
          xiugai();
        }}
      >
        编辑
      </Button>
      <CollectionCreateForm
        visible={visible}
        onCreate={onCreate}
        onCancel={() => {
          setVisible(false);
        }}
        data={data}
      />
    </div>
  );
};

export default Redact;
